<script setup lang="ts">
import { getSqlCheckData } from '@/api/subject';
import { SqlCheck } from '@/api/subject/type';
import YHeader from '@/components/YHeader.vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const subjectId = ref('');
const sqlCheck = ref([] as SqlCheck[]);

onMounted(() => {
    const route = useRoute();
    const id = route.query.id;
    if (!Array.isArray(id)) {
        subjectId.value = id as string;
        getSqlCheckData(subjectId.value).then((res) => {
            sqlCheck.value = res.data;
        });
    }
})
</script>

<template>
    <div class="container">
        <YHeader></YHeader>
        <div class="content">
            <div v-for="item in sqlCheck" class="item">
                <div>
                    <p>用户ID</p>
                    <p>{{ item.userId }}</p>
                </div>
                <div>
                    <p>SQL语句</p>
                    <p>{{ item.content }}</p>
                </div>
                <div>
                    <p>查重率</p>
                    <p>{{ item.multiplicity }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    background-color: white;
    width: 100%;
    .content {
        width: 100%;
        justify-content: center;
        .item {
            width: 88%;
            padding: 3%;
            margin: 3%;
            background-color: whitesmoke;
            margin-top: 3%;
            border-radius: 15px;
        }
    }
}
</style>